<!--  -->
<template>
  <div id="Changepassword">
    <div class="Changepassword-block-title">
      <p>题库专家修改</p>
      <span>question bank experts</span>
    </div>
    <el-form>
      <div class="Changepassword-block-input">
        <p>手机号：</p>
        <el-input v-model="mobile"
                  name="phone"
                  auto-complete='on'
                  placeholder="请输入手机号"></el-input>
      </div>
      <div class="Changepassword-block-input">
        <p>新密码：</p>
        <el-input v-model="password"
                  placeholder="请输入密码"></el-input>
      </div>
      <div class="Changepassword-block-input">
        <p>验证码：</p>
        <el-input placeholder="请输入验证码"
                  class="codeInput"
                  v-model="code"
                  :class="(second===0||second===this.$store.state.codeTime)?'':'codeBackground'">
          <template slot="append">
            <span @click="send_phone_code">{{codeText}}</span>
          </template>
        </el-input>
      </div>
    </el-form>

    <div class="Changepassword-block-btn">
      <el-button type="primary"
                 @click="password_submit">确认</el-button>
      <el-button v-on:click="jump_login">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Changepassword',
  data () {
    return {
      mobile: '', // 手机号码
      password: '', // 密码
      code: '', // 验证码

      second: this.$store.state.codeTime, // 注册 获取后开始计算的秒数
      codeText: '获取验证码'
    }
  },

  components: {},

  computed: {},

  mounted () {
    if (localStorage.getItem('mobile')) {
      this.mobile = localStorage.getItem('mobile')
    }
  },

  methods: {
    jump_login () {
      this.$emit('changeText', 1)
    },
    // 发送手机验证码
    send_phone_code () {
      var _this = this
      var codeTime // 计时器
      // console.log(_this.second)
      if (this.mobile === '') {
        this.$message({
          message: '请填写手机号码',
          type: 'warning'
        })
        return false
      } else if (!(/^1\d{10}$/.test(this.mobile))) {
        this.$message({
          message: '手机号码有误，请重填',
          type: 'error'
        })
        return false
      } else {
        if (_this.second !== _this.$store.state.codeTime) { return }
        console.log('获取验证码')
        _this.second = _this.$store.state.codeTime - 1
        codeTime = setInterval(function () {
          _this.second--
          if (_this.second > 0) {
            _this.codeText = _this.second + 's后重新获取'
          } else {
            clearInterval(codeTime)
            _this.codeText = '获取验证码'
            _this.second = _this.$store.state.codeTime
          }
        }, 1000)
        // 发送请求，手机验证码
        _this.$http.sms({
          phone: _this.mobile
        }).then((res) => {
          console.log(res)
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    // 修改密码提交
    password_submit () {
      // 手机号码
      if (this.mobile === '') {
        this.$message({
          message: '手机号码不能为空',
          type: 'warning'
        })
        return false
      }
      // 密码
      if (this.password === '') {
        this.$message({
          message: '密码不能为空',
          type: 'warning'
        })
        return false
      }
      // 验证码
      if (this.code === '') {
        this.$message({
          message: '请输入验证码',
          type: 'warning'
        })
        return false
      }
      this.$http.editPassWord({
        phone: this.mobile,
        newPassword: this.password,
        code: this.code
      }).then((res) => {
        console.log(res)
        this.$message({
          message: '修改密码成功，请进行登陆',
          type: 'success'
        })
        this.$emit('changeText', 1)
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}

</script>
<style lang='less'>
#Changepassword {
  position: absolute;
  top: 180px;
  width: 60%;
  padding: 0 20%;
  .Changepassword-block-title {
    padding: 30px 0 10px;
    margin: 0 30px 20px;
    text-align: left;
    border-bottom: 1px solid #d9d9d9;
    p {
      display: inline-block;
      margin-right: 30px;
      color: #666;
      font-size: 30px;
      letter-spacing: 5px;
    }
    span {
      font-size: 18px;
      color: #999;
    }
  }
  .Changepassword-block-input {
    width: 70%;
    margin: 0 auto 25px;
    font-size: 18px;
    height: auto;
    p {
      display: inline-block;
      width: 25%;
      margin-right: 2%;
      text-align: left;
      color: #999;
    }
    .el-input {
      width: 73%;
      // height: 42px;
      // border-radius: 10px;
      .el-input__inner {
        background: #f5f5f5;
        border: 1px solid #d9d9d9;
        border-radius: 10px;
      }
    }
    .codeInput {
      .el-input__inner {
        border-radius: 10px 0 0 10px;
      }
      .el-input-group__append {
        border-radius: 0 10px 10px 0;
        width: 40%;
        background: #64b5f6;
        color: white;
        cursor: pointer;
        padding: 0;
        span {
          padding: 10px;
        }
      }
    }
    .codeBackground {
      .el-input-group__append {
        background: #999999;
      }
    }
  }
  .Changepassword-block-btn {
    margin-bottom: 20px;
    button {
      width: 135px;
      height: 44px;
      margin: 0 20px;
    }
    .el-button--primary {
      background: #64b5f6;
      font-size: 16px;
    }
    .el-button--default {
      color: #999;
    }
  }
  .Changepassword-block-other {
    color: #64b5f6;
    font-size: 16px;
    cursor: pointer;
    // & > span:nth-child(2) {
    //   margin: 100px;
    // }
  }
}
</style>
